<template>
  <div class="order-page">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        @onSearch="onSearch"
        @onExport="onExport"
        :datas="tableSearchFormData"
      >
      </c-table-search-form>

      <!-- 表格部分 -->
      <c-table
        :columns="tableColumns"
        :datas="tableData"
        :loading="loading"
        showPagination
        :paginationDatas="paginationDatas"
        @onPageSizeChange="onPageSizeChange"
        @onShowNumChange="onShowNumChange"
      >
        <!-- 表格操作按钮 -->
        <template slot="handle" slot-scope="row">
          <a @click="handleView(row.tableRow, 'edit')"><a-icon type="eye" /> 查看</a>
        </template>
      </c-table>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "Order",
  components: {},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      confirmLoading: false,
      tableSearchForm: {
        source: "1",
        compiler: "1",
        informationStatus: "1",
        informationTypes: "1",
        category: "1",
        searchKey: ""
      },
      selectedRowKeys: [],
      tableSearchFormData: [
        {
          label: "订单来源",
          prop: "source",
          type: "select",
          typeData: [
            {
              label: "现货商城",
              value: "0"
            },
            {
              label: "求购大厅",
              value: "1"
            }
          ]
        },
        {
          label: "作价方式",
          prop: "compiler",
          type: "select",
          typeData: [
            {
              label: "点价",
              value: "0"
            },
            {
              label: "延期点价",
              value: "1"
            },
            {
              label: "确定价",
              value: "2"
            }
          ]
        },
        {
          label: "订单状态",
          prop: "informationStatus",
          type: "select",
          typeData: [
            {
              label: "全部",
              value: "0"
            },
            {
              label: "待确认",
              value: "1"
            },
            {
              label: "已挂单",
              value: "2"
            },
            {
              label: "已生成合同",
              value: "3"
            },
            {
              label: "已关闭",
              value: "4"
            },
            {
              label: "已取消",
              value: "5"
            }
          ]
        },
        {
          label: "买家公司",
          prop: "informationTypes",
          type: "select",
          typeData: [],
          width: "200"
        },
        {
          label: "卖家公司",
          prop: "category",
          type: "select",
          typeData: [
            {
              label: "所属分类1",
              value: "1"
            },
            {
              label: "所属分类2",
              value: "2"
            },
            {
              label: "所属分类3",
              value: "3"
            }
          ],
          width: "200"
        },
        {
          prop: "date",
          type: "date-picker"
        },
        {
          label: "请输入企业名称/简称/用户手机号码/姓名",
          prop: "searchKey",
          type: "search"
        },
        {
          prop: "export",
          type: "exportBtn"
        }
      ],
      orderSource: [
        {
          value: "0",
          lable: "现货商城"
        },
        {
          value: "1",
          lable: "求购大厅"
        }
      ],
      evaluateWay: [
        {
          value: "0",
          lable: "点价"
        },
        {
          value: "1",
          lable: "延期点价"
        }
      ],
      orderStatus: [
        {
          value: "0",
          lable: "全部"
        },
        {
          value: "1",
          lable: "待确认"
        },
        {
          value: "2",
          lable: "已挂单"
        },
        {
          value: "3",
          lable: "待生成合同"
        },
        {
          value: "4",
          lable: "已生成合同"
        },
        {
          value: "5",
          lable: "已关闭"
        },
        {
          value: "6",
          lable: "已取消"
        }
      ],
      form: {
        originListList: [], // 路线起点列表
        origin: "", // 起点
        lineOperationList: [
          {
            line: "",
            priceSpread: ""
          }
        ] // 线路操作块数组
      }, // 请求参数

      tableColumns: [
        {
          title: "订单编号",
          dataIndex: "userId",
          align: "center",
          width: 120
        },
        {
          title: "买家",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "" }
        },
        {
          title: "卖家",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "" }
        },
        {
          title: "点价人",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "" }
        },
        {
          title: "商品名",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "" }
        },
        {
          title: "合约",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "" }
        },
        {
          title: "基价",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "" }
        },
        {
          title: "成交数",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "" }
        },
        {
          title: "下单数",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "" }
        },
        {
          title: "订单状态",
          dataIndex: "",
          align: "center",
          scopedSlots: { customRender: "" }
        },
        {
          title: "下单时间",
          dataIndex: "createDate",
          align: "center"
        },
        {
          title: "操作",
          key: "handle",
          scopedSlots: { customRender: "handle" },
          align: "center",
          width: 150
        }
      ],

      openType: "add",
      companyStatus: "",
      tableData: [],
      paginationDatas: {
        pageSizeOptions: ["10", "20", "30", "40", "50","200","1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onSearch(val) {
      this.form = val;
      this.onPageOnlod();
    },
    onExport() {
      // console.log(123)
    },
    onPageOnlod() {
      this.loading = true;
      getUserList({
        auditState: this.companyStatus ? Number(this.companyStatus) : "",
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    handleView(row) {
      this.$router.push({
        name: "Order_Detail"
        //   query: { companyId: row.id.toString(), companyName: row.companyName }
      });
    },
    handleCompanyStatusChange(val) {
      this.companyStatus = val;
      this.onPageOnlod();
    }
  }
};
</script>

<style lang="less" scoped>
.order-page {
  .select-selection {
    margin-bottom: 20px;
  }
}
</style>
